<?php

require_once  __DIR__ . '/includes/authenticate.php';
include_once './db_bb_connect.php';

?>


<style type="text/css">

#dataviewercontainer{
  font-size: 14px;
}

.checkbox{
	float:left;
}
.checkboxtext{
	//float:left;
}

</style>


<br>

<h2>Extended Data Viewer</h2>
<br>

<div id="dataviewercontainer">

<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">

<div class="row">
<div class="col-md-9">

<form method="POST" action="">
<div class="row">
	<div class="col-md-4">
	<h3>Location </h3>
  <input type="checkbox" name="location[]" value="home" class="checkbox location"> <div class="checkboxtext"> &nbsp; Home </div>
  <input type="checkbox" name="location[]" value="away" class="checkbox location"> <div class="checkboxtext">&nbsp; Away </div>
</div>
	<div class="col-md-4">
	<h3>Result </h3>
  <input type="checkbox" name="result[]" value="wins" class="checkbox result"> <div class="checkboxtext">&nbsp; Wins </div>
  <input type="checkbox" name="result[]" value="losses" class="checkbox result"> <div class="checkboxtext">&nbsp; Losses </div>
</div>
	<div class="col-md-4">
<h3>Opponent </h3>
  <?php 

$sql = "SELECT DISTINCT opponent 
FROM games 
ORDER BY opponent";

$result=$db->query($sql);

while ($row=$result->fetch_assoc()) {
  $opponent = $row['opponent'];
  echo "<input type='checkbox' name='opponent[]' value='$opponent' class='checkbox'> <div class='checkboxtext'> &nbsp; $opponent </div>";
}

?>


</form>
</div>
</div>
</div>
<br>
<div class="col-md-3">

</div>
</div>

<div class="row">
<div class="col-md-12">
<div id="dataviewercontent"></div>
</div>
</div>

</div>


  <script	  src="https://code.jquery.com/jquery-3.2.1.min.js"
			  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
			  crossorigin="anonymous"></script>
		
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<script type="text/javascript">

$("form").on("submit", function(event) {
    postData = $( this ).serialize();
    event.preventDefault();
    callDataviewerPage(postData);
});


$( "select" ).on( "change", function( event ) {
  postData = $( this ).serialize();
  callDataviewerPage(postData);
  event.preventDefault();
});

$( "form .checkbox" ).on( "click", function( event ) {
  postData = $( this.form ).serialize();
  callDataviewerPage(postData);
  event.preventDefault();
});

function callDataviewerPage(e, postData){
  $.ajax({
  type: "POST",
  url: "./dataviewer_results.php",
  data: this.postData,
  success: function(data) {
  $("#dataviewercontent").html(data);
  }
  }); 

  e.preventDefault();
};

$( document ).ready( function loadAll() {
    $.ajax({
  type: "POST",
  url: "./dataviewer_results.php",
  success: function(data) {
  $("#dataviewercontent").html(data);
  }
  }); 
});




</script>

